<template>
  <div class="select-body">
    <div class="select-query">
      <el-input
        v-model="blurry"
        placeholder="请输入内容"
        style="width: 100%"
        @clear="filterSelect"
        @input.native="filterSelect"
      >
        <i slot="suffix" class="el-input__icon el-icon-search" />
      </el-input>
    </div>
    <el-scrollbar style="height: 360px;overflow-y: auto">
      <div class="item-body">
        <div v-for="item in dataList" :key="item.id" class="item-body-li">
          <div class="li-body">
            <div class="li-title">{{ item.name }}</div>
            <div class="li-icon"><el-button type="text" @click="selectItem(item)"><i class="el-icon-plus" /></el-button></div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { queryAll } from '@/api/portal/manager/data'
export default {
  name: 'NoticeDataSelect',
  // 定义实现v-modal的属性与事件
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      blurry: '',
      dataList: [],
      oldList: []
    }
  },
  created() {
    this.initAll()
  },
  methods: {
    filterSelect() {
      if (this.blurry) {
        this.dataList = this.oldList.filter(item => {
          if (item.name.includes(this.blurry)) {
            return item
          }
        })
      }
    },
    initAll() {
      queryAll().then(res => {
        const { data } = res
        this.oldList = data.data
        this.dataList = this.oldList
      })
    },
    selectItem(item) {
      item.jxx = JSON.parse(item.jxx)
      this.$emit('change', item)
      document.body.click()
    }
  }
}
</script>

<style scoped>
.select-body{
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.select-query {
  width: 100%;
  height: 40px;
}
.item-body {
  width: 100%;
  height: auto;
  min-height: 60px;
}
.item-body-li {
  width: 50%;
  float: left;
  height: 40px;
  line-height: 40px;
  text-align: left;
  padding: 0px 10px;
  box-sizing: border-box;
}
.li-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  border-bottom: 1px solid #e2e2e2;
}
.li-title {
  flex: 1 1 auto;
  height: 40px;
  line-height: 40px;
  text-align: left;
}
.li-icon{
  width: 40px;
  height: 40px;
  flex: 0 1 auto;
  line-height: 40px;
  text-align: center;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
